
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <style>

body{
    /* background-color: #ADB7B6;
    margin: 0;
    font-family: Poppins; */
    background-color: #ADB7B6;
}
.main{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrap {
    /* width: 200px; */
    flex: 1;
    margin: 2rem;
    transform-style: preserve-3d;
    transform: perspective(100rem);
    cursor: pointer;
    /* border: 2px solid #000; */
}
.item {
    --rX: 0deg;
    --rY: 0deg;
    --bX: 50%;
    --bY: 80%;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    transform: rotateX(var(--rX)) rotateY(var(--rY));
    transition: 0.2s;
    padding: 20px;
    box-shadow: 0 30px 20px #5555;
    text-align: center;
}
.item img{
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 20px #5559;
    z-index: -1;
}
    </style>
</head>
<body>
    <section class="main">
        <div class="wrap">
            <div class="item">
                <p>Lisa &#127804</p>
                <img src="img/10002.jpeg" alt="">
            </div>
        </div>

        <div class="wrap">
            <div class="item">
                <p>Rosé &#127799</p>
                <img src="img/10003.jpeg" alt="">
            </div>
        </div>

        <div class="wrap">
            <div class="item">
                <p>Jennie &#127803</p>
                <img src="img/10004.jpeg" alt="">
            </div>
        </div>

        <div class="wrap">
            <div class="item">
                <p>Jisoo &#127801</p>
                <img src="img/10005.jpeg" alt="">
            </div>
        </div>

    </section>
    <!-- <script src="js/app.js"></script> -->
     <script>

// let items = document.querySelectorAll('.item');
// console.log(items);
// items.forEach(item => {
//     item.addEventListener('mousemove', (e)=>{
//         let positionPx = e.x - item.getBoundingClientRect().left;
//         let positionX = (positionPx / item.offsetWidth) * 100;
//         console.log(positionX, positionPx);

//         let positionPy = event.y - item.getBoundingClientRect().top;
//         let positionY = (positionPy / item.offsetHeight) * 100;


//         item.style.setProperty('--rX', (0.5)*(50 - positionY) + 'deg');
//         item.style.setProperty('--rY', -(0.5)*(50 - positionX) + 'deg');
//     })
//     item.addEventListener('mouseout', ()=>{
//         item.style.setProperty('--rX', '0deg');
//         item.style.setProperty('--rY', '0deg');
//     })
// })
     </script>
</body>
</html>